<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-30 19:03:13
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-09-02 09:38:37
 * @FilePath: \dance\pages\me\me.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="me">
    <!-- 老师端 -->
    <template v-if="isTeacher && teacherShow">
      <teacherView />
      <!--  <teacherClient />-->
    </template>
    <!-- 学生端 -->
    <template v-else>
      <uv-status-bar bgColor="#ff7a66"></uv-status-bar>
      <view class="me-title">
        <button class="reset-button me-title-avatar" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
          <uv-avatar :src="headerpic" size="140rpx" mode="aspectFill"></uv-avatar>
        </button>
        <view class="me-title-center">
          <input type="nickname" v-model="userName" class="me-title-center-name" @change="onChangeUserName" />
          <text class="me-title-center-num" selectable user-select>去卡号：{{ state.vuex_user.serial }}</text>
        </view>
        <!-- <view class="order-btn">
          <button open-type="contact" class="reset-button flex-1">联系客服</button>
          <uv-line direction="column" color="#545454" margin="0 24rpx" :hairline="false" length="20"></uv-line>
          <button class="reset-button flex-1" @click="handleOrder">我的订单</button>
        </view> -->
        <view class="order-btn">
          <image src="../../static/img/gift.png" class="image" style="width: 72rpx; height: 72rpx" mode="aspectFill" />
          <button class="reset-button" @click="goToProp">道具店</button>
          <uv-line direction="column" color="#545454" margin="0 24rpx" :hairline="false" length="20"></uv-line>
          <button class="reset-button" @click="handleOrder">我的订单</button>
          <uv-line direction="column" color="#545454" margin="0 24rpx" :hairline="false" length="20"></uv-line>
          <button open-type="contact" class="reset-button">联系客服</button>
        </view>
      </view>
      <view class="box">
        <view class="me-tabs">
          <view class="me-tabs-item" :class="{ 'me-tabs-item-active': current === index }" v-for="(item, index) in list" @click="onTabsChange(index)">
            {{ item.name }}
            <view class="icon" v-if="index === 0">
              <uv-icon name="jiantou" custom-prefix="custom-icon" color="#fff" size="35rpx"></uv-icon>
            </view>
          </view>
        </view>
        <view class="me-tabs-active" :style="{ left: `${current * 33.3333 + leftWidth[current]}%` }"></view>
        <view class="me-tabs-line"></view>
        <sort :current="current" v-model:sort="list[current].sort" @sortChange="sortChange"></sort>
      </view>
      <view class="me-swiper">
        <swiper :current="current" @change="change" class="h-100">
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="h-100" @scrolltolower="onScrolltolower">
              <!--收藏课程-->
              <curriculum :current="current" :screenVal="screenVal" ref="curriculumRef" />
            </scroll-view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="h-100" @scrolltolower="onScrolltolower">
              <!-- 收藏视频-->
              <collectVideo :current="current" ref="videoRef" />
            </scroll-view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="h-100" @scrolltolower="onScrolltolower">
              <!-- 收藏老师-->
              <collect :current="current" ref="collectRef" />
            </scroll-view>
          </swiper-item>
          <!--收藏舞房-->
          <!-- <swiper-item class="swiper-item">
            <scroll-view scroll-y class="h-100" @scrolltolower="onScrolltolower">
              <room :current="current" ref="roomRef" />
            </scroll-view>
          </swiper-item> -->
        </swiper>
      </view>
      <uv-toast ref="toastRef"></uv-toast>
      <view class="me-screen" :class="{ 'me-screen-show': screenShow }">
        <view class="me-screen-content">
          <screen v-model="screenVal" @onScreenChange="onScreenChange"></screen>
        </view>
      </view>
    </template>
    <view @click="onToggle" v-if="isTeacher" class="me-toggle">身份切换</view>
  </view>
  <!-- <view class="server">
    <button open-type="contact" class="uv-reset-button server-button">
      <uv-icon name="server-man" color="#fff" size="28"></uv-icon>
    </button>
  </view> -->
</template>

<script setup>
  import { defaultImages } from '@/common/js/global.js';
  import { onHide, onShow, onShareAppMessage, onLoad, onReady } from '@dcloudio/uni-app';
  import { ref, reactive, computed, nextTick } from 'vue';
  import { uploadFn } from '@/common/js/fn';
  import curriculum from './components/curriculum.vue';
  import collectVideo from './components/collectVideo.vue';
  import collect from './components/collect.vue';
  import screen from './components/screen.vue';
  import sort from './components/sort.vue';
  import store from '@/store/index.js'; //需要引入store
  import teacherView from './teacherView.vue';

  let { state, commit } = store;
  let list = ref([
    { name: '收藏课程', sort: 0 },
    { name: '收藏视频', sort: 0 },
    { name: '收藏老师', sort: 0 }
  ]);
  let screenVal = ref(0);
  let screenShow = ref(false);
  let current = ref(0);
  const toastRef = ref();
  let headerpic = computed(() => {
    return state.vuex_user.headerpic || defaultImages[2];
  });
  let isTeacher = computed(() => {
    return state.vuex_user.isTeacher;
  });
  let userName = ref('');
  let curriculumRef = ref();
  let collectRef = ref();
  let roomRef = ref();
  let videoRef = ref();
  let leftWidth = ref([5.5, 1.5, -2.5]);
  const change = ({ detail }) => {
    current.value = detail.current;
  };
  let arr = [curriculumRef, videoRef, collectRef];
  const onTabsChange = index => {
    if (current.value === 0 && current.value === index) {
      screenShow.value = true;
      return;
    }
    current.value = index;
    if (arr[current.value].value) {
      arr[current.value].value.sonChange({
        type: 'search'
      });
    }
  };
  const goToProp = () => {
    uni.navigateTo({
      url: '/pages/prop/index'
    });
  };
  const handleOrder = () => {
    uni.navigateTo({
      url: '/pages/order/index'
    });
  };
  const onScreenChange = val => {
    screenVal.value = val;
    screenShow.value = false;
    uni.setStorageSync('screenVal', val);
  };
  // 以下代码每次到我的都要刷新数据 h5有问题先不管
  onShow(() => {
    userName.value = state.vuex_user.nickname || '用户';
    if (!isTeacher.value && !teacherShow.value) {
      nextTick(() => {
        if (arr[current.value].value) {
          arr[current.value].value.sonChange({
            type: 'search'
          });
        }
      });
    }
    setTimeout(() => {
      // 如果是个老师就去老师的页面，如果不是就去首页
      uni.$uv.mpShare = {
        title: `${isTeacher.value ? `#去卡#我是 ${state.vuex_user.teacher.username}` : '#去卡#按次付费，无需囤卡，#小小跳舞,快来拿捏~'}`, // 默认为小程序名称
        path: `/pages/${isTeacher.value ? `me/share?id=${state.vuex_user.teacher.id}` : 'index/index2'}` // 默认为当前页面路径路径
      };
    });
  });
  // 滚动到底部触发
  const onScrolltolower = () => {
    if (arr[current.value].value) {
      arr[current.value].value.sonChange({
        type: 'scrollDown'
      });
    }
  };
  // 获取头像的回调
  const onChooseavatar = async val => {
    let file_path = await uploadFn(val.detail.avatarUrl);
    uni.$uv.http.post('app/wechat/update_headerpic', {
      headerpic: file_path
    });
    commit('$uStore', {
      name: 'vuex_user',
      value: { ...state.vuex_user, headerpic: file_path }
    });
    toastRef.value.show({
      overlay: false,
      message: `更新头像成功`,
      type: 'success'
    });
  };
  // 昵称回调
  const onChangeUserName = async val => {
    if (!val.detail.value) return;
    // 如果名称没变化，不调用接口
    if (state.vuex_user.nickname === val.detail.value) return;
    await uni.$uv.http.post('app/wechat/update_nickname', {
      nickname: val.detail.value
    });
    userName.value = val.detail.value;
    commit('$uStore', {
      name: 'vuex_user',
      value: { ...state.vuex_user, nickname: val.detail.value }
    });
    toastRef.value.show({
      overlay: false,
      message: `更新昵称成功`,
      type: 'success'
    });
  };
  const sortChange = () => {
    arr[current.value].value.sonChange({
      type: 'sort',
      sort: list.value[current.value].sort
    });
  };
  // 设置默认的列表展示方式
  screenVal.value = uni.getStorageSync('screenVal') || 0;
  // 如果是老师默认过来是这样子的。
  let teacherShow = ref(false);
  let timeout = '';
  teacherShow.value = state.vuex_user.isTeacher;
  // 切换身份
  const onToggle = () => {
    teacherShow.value = !teacherShow.value;
    if (teacherShow.value) return;
    timeout = setInterval(() => {
      if (arr[current.value].value) {
        clearInterval(timeout);
        arr[current.value].value.sonChange({
          type: 'search'
        });
      }
    }, 100);
  };
</script>

<style lang="scss" scoped>
  // 去除button的所有默认样式，让其表现跟普通的view、text元素一样
  .reset-button {
    padding: 0;
    background-color: transparent;
    /* #ifndef APP-PLUS */
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    /* #endif */
    /* #ifdef APP-NVUE */
    border-width: 0;
    /* #endif */
    &::after {
      border: 0;
    }
  }
  .h-100 {
    height: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .me {
    background-color: #1d1f24;
    height: 100vh;
    color: #fff;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    position: relative;
    &-toggle {
      position: fixed;
      bottom: 5%;
      right: 10%;
      border-radius: 50%;
      background-color: #fff;
      color: $dance-main-color;
      padding: 17rpx;
      width: 80rpx;
      text-align: center;
    }
    &-nav {
      width: 100%;
      height: 157rpx;
      background-color: #ff7a66;
      border-radius: 0px 0px 87rpx 87rpx;
      position: relative;
      &-avatar {
        position: absolute;
        left: 17rpx;
        bottom: 11rpx;
      }
      &-content {
        position: absolute;
        bottom: 11rpx;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      &-name {
        font-size: 35rpx;
        text-align: center;
      }

      &-num {
        margin-top: 3rpx;
        font-size: 23rpx;
      }
    }

    &-title {
      display: flex;
      flex-direction: column;
      // align-items: center;
      // justify-content: center;
      background-color: #ff7a66;
      border-bottom-left-radius: 87rpx;
      border-bottom-right-radius: 87rpx;
      position: relative;
      // height: 157rpx;
      height: 192rpx;
      &-avatar {
        position: absolute;
        left: 17rpx;
        // bottom: 11rpx;
        bottom: 45rpx;
      }
      &-center {
        position: absolute;
        top: 35rpx;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &-name {
          font-size: 35rpx;
          text-align: center;
          font-weight: bold;
        }

        &-num {
          font-size: 23rpx;
        }
      }
    }
    .order-btn {
      padding: 0 24rpx 0 12rpx; // 需要我的道具的时候放开这个注释
      // padding: 0 24rpx;
      display: flex;
      align-items: center;
      height: 63rpx;
      background: #ffcb68;
      box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
      border-radius: 47rpx;
      line-height: 63rpx;
      background: #ffcb68;
      color: #545454;
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      text-align: center;
      position: absolute;
      right: 61.05rpx;
      bottom: -8.72rpx;
      .image {
        margin-top: -19rpx;
        margin-right: 12rpx;
      }
    }
    .box {
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      padding-bottom: 7rpx;
    }
    &-tabs {
      display: flex;
      justify-content: space-between;
      margin-left: 44rpx;
      margin-right: 44rpx;
      margin-top: 87rpx;
      color: #fff;

      &-item {
        flex: 1;
        text-align: center;
        transition: all 0.3s;
        z-index: 1;
        font-size: 35rpx;
        position: relative;
        .icon {
          position: absolute;
          right: 3px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 999;
        }
      }
      &-item-active {
        font-weight: bold;
      }
      &-active {
        position: absolute;
        width: 227rpx;
        height: 87rpx;
        background-color: $dance-main-color;
        transition: all 0.3s;
        border-radius: 47rpx 47rpx 7rpx 7rpx;
        z-index: 0;
        transform: translateY(-82%);
      }
      &-line {
        margin: 0 44rpx;
        height: 16rpx;
        background-color: #ff7a66;
        border-radius: 17rpx;
      }
    }
    &-subtitle {
      font-size: 35rpx;
      display: flex;
      margin-top: 35rpx;
      align-items: center;

      &-left {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        &-info {
          font-size: 28rpx;
          color: #9d9d9d;
          margin-left: 9rpx;
        }
      }

      &-center {
        flex: 1;
        text-align: center;
        height: 70rpx;
        line-height: 70rpx;
        background-color: #ffcb68;
        border-radius: 42rpx;
        font-size: 35rpx;
        color: #000;
        letter-spacing: 2px;
      }

      &-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 76rpx;
          height: 76rpx;
        }
      }
    }

    &-swiper {
      flex: 1;
      display: inline-grid;
      padding-top: 17rpx;
      box-sizing: border-box;
    }
    &-screen {
      width: 100%;
      height: 100%;
      transition: all 0.3s;
      transform: translate(0%, -100%);
      z-index: 999;
      opacity: 1;
      position: fixed;
      display: flex;
      flex-direction: column;
      inset: 0px;
      justify-content: center;
      align-items: center;
      transition: opacity 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;
      &-content {
        width: 689rpx;
        height: 1047rpx;
      }
    }
    &-screen-show {
      transform: translate(0%, 0%);
    }
  }
  .server {
    position: fixed;
    bottom: 10%;
    right: 35rpx;
    border-radius: 50%;
    height: 87rpx;
    width: 87rpx;
    overflow: hidden;
    &-button {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff7a66;
    }
  }
</style>
<style scoped>
  uni-button:after {
    border: none !important;
  }
</style>
